<template>
  <div class="box">
    <div class="commonHeader header">社区概况</div>
    <div class="content">
      <div class="data-box boxStyle">
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="box-content">
          <div class="liFlex">
            <div
              v-for="(list, index) in ListData"
              :key="index"
            >
              <div class="imgBox">
                <img
                  :src="list.url"
                  alt=""
                />
              </div>
              <div style="padding-left:10px">
                <div class="number">{{ list.number }}<span class="unit">{{list.unit }} </span></div>
                <div class="name">{{ list.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>
<script>
import * as api from "@/api";
export default {
  name: 'KeyEarlywarning',
  data() {
    return {
      ListData: [
        {
          url: require('assets/icon_xiaoqu.png'),
          number: '1',
          name: '管辖小区',
          unit: '个'
        },
        {
          url: require('assets/icon_shebei.png'),
          number: '21',
          name: '在线设备 ',
          unit: '个'
        },
        {
          url: require('assets/icon_jumin.png'),
          number: '430',
          name: '居民总数',
          unit: '人'
        },
        {
          url: require('assets/icon_cheliang.png'),
          number: '33',
          name: '车辆总数',
          unit: '辆'
        }
        
      ]
    }
  },
  methods: {
   async getResidentAndVehicleNumbers(){
      let data =await api.getResidentAndVehicleNumbers()
      let carObj={
        url: require('assets/icon_cheliang.png'),
          number: data.caras,
          name: '车辆总数',
          unit: '辆'
      }
      this.ListData.push(carObj)
   }
  },
 created() {
  // this.getResidentAndVehicleNumbers()
 },
}
</script>
<style lang="less" scoped>
.box {
  height: 20%;
  .header {
  }
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    .boxStyle {
      width: 100%;
      height: 100%;
      .box-content {
        box-sizing: border-box;
        padding: 1rem;
        display: flex;
        align-items: center;
        height: 100%;
        .liFlex {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            flex: 1;
            .imgBox {
              width: 5rem;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .number {
            font-size: 1.5rem;
            font-weight: bold;
            .unit {
              padding-left: 0.5rem;
              opacity: 0.5;
              font-size: 0.8rem;
            }
          }
          .name {
            padding-top: 0.5rem;
            font-size: 0.8rem;
            opacity: 0.5;
          }
        }
      }
    }
  }
}
</style>
